 align="center"<template>
  <div class="page">
    <el-card class="card">
      <el-row class="card-content">
        <!--    搜索-->
        <el-col :span="24" class="search-wrapper">
          <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
        </el-col>
        <!--    按钮和分页-->
        <el-col :span="24" class="btn-page-wrapper">
          <el-button @click="exportExcel">导出excel</el-button>
        </el-col>
        <!--    表格-->
        <el-col :span="24" class="data">
          <el-table :data="data" stripe  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="source" label="来源" align="center"></el-table-column>
            <el-table-column prop="orderType" label="订单类型" align="center"></el-table-column>
            <el-table-column prop="orderNumber" label="订单号" align="center"></el-table-column>
            <el-table-column prop="goodsnumber" label="商品数量" align="center"></el-table-column>
            <el-table-column prop="orderAmount" label="订单金额(￥)" align="center"></el-table-column>
            <el-table-column prop="realPay" label="实付金额(￥)" align="center"></el-table-column>
            <el-table-column prop="consigneeName" label="收货人姓名" align="center"></el-table-column>
            <el-table-column prop="consigneePhone" label="收货人手机号" align="center"></el-table-column>
            <el-table-column prop="orderTime" label="下单时间" align="center"></el-table-column>
            <el-table-column prop="orderState" label="订单状态" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click.stop="view(scope.row.orderNumber)" type="text">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager-group">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, jumper, prev, next"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import PageMixin from '@/framework/mixins/pageMixin'
import Normalize from '@/framework/mixins/normalize'

export default {
  name: "list",
  mixins: [
    PageMixin,
    // Normalize(search, count)
  ],
  data(){
    return{
      searchItems: [
        {name: '订单类型', key: 'type', type: 'select'},
        {name: '订单号', key: 'number', type: 'string',},
        {name: '收货人姓名', key: 'name', type: 'string',},
        {name: '收货人手机', key: 'phone', type: 'string',},
        {name: '下单时间', key: 'phone', type: 'date',},
        {name: '订单状态', key: 'state', type: 'select',}
      ],
      data:[
        {source:'纺织直播',orderType:'直播订单',orderNumber:'231548784987',goodsnumber:'300',orderAmount:'3000',realPay:'3000',consigneeName:'刘备',consigneePhone:'1597856423',orderTime:'2022-01-03 16:00',orderState:'待发货'},
        {source:'现代纺织业',orderType:'直播订单',orderNumber:'231548784988',goodsnumber:'1',orderAmount:'10',realPay:'10',consigneeName:'李白',consigneePhone:'1354879521',orderTime:'2022-01-02 09:00',orderState:'待确认'},
        {source:'布料讲解',orderType:'短视频订单',orderNumber:'231548784989',goodsnumber:'3',orderAmount:'3840',realPay:'3840',consigneeName:'诸葛亮',consigneePhone:'1995684923',orderTime:'2022-01-05 12:00',orderState:'已完成'},
        {source:'纺织品',orderType:'短视频订单',orderNumber:'231548784990',goodsnumber:'8',orderAmount:'80',realPay:'80',consigneeName:'张飞',consigneePhone:'1285684923',orderTime:'2022-01-05 12:00',orderState:'待收货'},
        {source:'国际纺织展览会',orderType:'直播订单',orderNumber:'231548784991',goodsnumber:'16',orderAmount:'160',realPay:'160',consigneeName:'关羽',consigneePhone:'1395684923',orderTime:'2022-01-05 12:00',orderState:'待自提'},
        {source:'纺织技术介绍',orderType:'短视频订单',orderNumber:'231548784992',goodsnumber:'20',orderAmount:'200',realPay:'200',consigneeName:'赵云',consigneePhone:'1595684923',orderTime:'2022-01-05 12:00',orderState:'待付款'},
      ],
      // page:1,
      // pageSize:0,
      // total:0,
      idList: [],
    }
  },
  components: { Search },
  methods:{
    //导出excel表
    exportExcel(){
      this.$confirm('确定将选择的数据导出为excel表格吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$axios({
            method: 'post',
            headers: {
              'Access-Token': localStorage.getItem('manager_web_token'),
            },
            url: '/api/journal/exportExcel',
            data: {idList: this.idList},
            responseType: 'blob',
          }).then((res) => {
            this.idList = []
            const fileName = `订单列表.xls`
            const content = res.data
            const blob = new Blob([content])
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(content)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else {
              // IE10+下载
              navigator.msSaveBlob(content, fileName)
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消')
        })
    },
    //条件搜索
    searchBySearchItem(){

    },
    //表格项选择触发事件
    handleSelectionChange(row){
      let list = []
      row.forEach(item=> {
        list.push(item.orderNumber)
      })
      this.idList = list
      console.log(this.idList)
    },
    //查看
    view(orderNumber){
      this.$router.push({path:'/order/list/show/'+orderNumber})
    }
  },
}
</script>

<style lang="less" scoped>
.pager-group{
  width:100%;
  margin: 20px 0;
}
</style>
